<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../../client_modules/angular/angular.js"></script>
    <!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
    <script src="../../../../client_modules/ng-file-upload/ng-file-upload-shim.js"></script>
    <script src="../../../../client_modules/ng-file-upload/ng-file-upload.js"></script>
    <script src="js/upload.js"></script>
    <link rel="stylesheet" href="../../../../client_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/upload.css">
</head>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<form name="form">
    <fieldset>
        <legend>Upload on form submit</legend>
        <input type="text" ng-model="dname"><br>
        <input type="number" ng-model="price"><br>
        <input type="file" ngf-select ng-model="file" name="file"
               accept="image/*" ngf-max-size="2MB" required
               ngf-model-invalid="errorFile">
        <img ng-show="myForm.file.$valid" ngf-thumbnail="file" class="thumb"> <button ng-click="file = null" ng-show="file">Remove</button>
        <br>
        <button type="button" ng-click="submit()">submit</button><br>
      <span class="progress" ng-show="file.progressPercentage >= 0">
        <div style="width:{{file.progressPercentage}}%"
             ng-bind="file.progressPercentage + '%'"></div>
      </span>
        <span ng-show="file.result">Upload Successful</span>
        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </fieldset>
    <br>
</form>
</body>
</html>